import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import Tooltip from '@mui/joy/Tooltip';
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
import { useColorScheme } from '@mui/joy/styles';
import IconButton from '@mui/joy/IconButton';

const ThemeSwitcher: FC = () => {
  const { t } = useTranslation('common');
  const { mode, setMode } = useColorScheme();
  return (
    <Tooltip title={t('theme.change')} variant="outlined">
      <IconButton
        id="toggle-mode"
        size="sm"
        variant="plain"
        color="neutral"
        sx={{ alignSelf: 'center' }}
        onClick={() => {
          if (mode === 'light') {
            setMode('dark');
          } else {
            setMode('light');
          }
        }}
      >
        {mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
      </IconButton>
    </Tooltip>
  );
};

export default ThemeSwitcher;
